<script setup>
import { h, ref } from "vue";
import { NIcon } from "naive-ui";
import {
    NotificationsActiveOutlined,
    DarkModeRound,
    AccountCircleOutlined,
    ManageAccountsOutlined,
    LogOutOutlined,
} from "@vicons/material";
import { renderIcon } from "@/utils/render-icon";
import { useUserStore } from "@/stores/userStore";
import { storeToRefs } from "pinia";
import UserBasicInfoDrawer from '@/components/user/UserBasicInfoDrawer.vue'

// 共享库（用户信息）
const userStore = useUserStore();
// 用户信息（头像，昵称，等级，编号）
const { head_image, nick_name, level_info, id } = storeToRefs(userStore);
const { resetUserInfo } = userStore;

// -------------------- 主题 ---------------------------

// 引入主题共享库
import { useThemeStore } from "@/stores/themeStore";

// 创建共享库实例对象
const themeStore = useThemeStore();

// 解构出共享库中的数据
const { theme, isDarkTheme } = storeToRefs(themeStore);
// 解构出共享库中的函数
const { changeTheme } = themeStore;

// ---------------------- 登录模态框 --------------------
// 登录注册模态框共享库
import { useLoginModalStore } from "@/stores/loginModalStore";

// 创建共享库实例对象
const loginModalStore = useLoginModalStore();

// 改变登录模态框状态的函数
const { changeLoginModalShowStatus } = loginModalStore;

// -----------------------------------------------------

// 用户头像的菜单选项
const menuOptions = [
    {
        label: "用户信息",
        key: "user-center",
        icon: renderIcon(AccountCircleOutlined),
    },
    {
        label: "账户设置",
        key: "user-setting",
        icon: renderIcon(ManageAccountsOutlined),
    },
    {
        label: "退出登录",
        key: "sign-out",
        icon: renderIcon(LogOutOutlined),
    },
];

/**
 * 选中用户菜单的某一个选项
 * @param {String} key 菜单选项的 key
 */
const clickUserMenu = (key) => {
    if (key === "sign-out") {
        resetUserInfo(); // 重置用户的信息
    } else if (key === "user-center") {
        userBasicInfo.value.changeShow(true) // 显示用户基本信息（抽屉）
    }
};

// 用户基本信息组件对象
const userBasicInfo = ref(null)
</script>


<template>
    <n-space align="center" justify="space-between" style="height: 100%;">
        <n-text>知客笔记</n-text>
        <!-- 用户头像，消息，主图，登录 -->
        <n-space align="center" :wrap-item="false">

            <!-- 用户信息 -->
            <n-popover v-if="id" style="min-width: 260px;" content-style="padding: 10px">
                <template #trigger>
                    <n-button circle :bordered="false">
                        <!-- 用户头像 -->
                        <n-avatar round :src="head_image" />
                    </n-button>
                </template>
                <n-thing :title="nick_name">
                    <template #avatar>
                        <n-avatar round :size="50" style="position: relative;top: 3px;" :src="head_image" />
                    </template>
                    <template #description>
                        <n-space align="center">
                            <n-tag size="small" type="success" :bordered="false">
                                {{ level_info }}
                            </n-tag>
                            <n-text depth="3">9999-12-31 到期</n-text>
                        </n-space>
                    </template>
                    <template #default>
                        <n-divider style="margin: 10px auto;"></n-divider>
                        <!-- 用户头像菜单选项 -->
                        <n-menu :options="menuOptions" @update:value="clickUserMenu" />
                    </template>
                </n-thing>
            </n-popover>

            <!-- 分割线 -->
            <n-divider v-if="id" vertical />
            <!-- 消息 -->
            <n-badge dot processing type="success" :offset="[-5, 5]">
                <n-button circle tertiary>
                    <template #icon>
                        <n-icon :component="NotificationsActiveOutlined"></n-icon>
                    </template>
                </n-button>
            </n-badge>
            <!-- 主题 -->
            <n-button circle tertiary @click="changeTheme(!isDarkTheme)">
                <template #icon>
                    <n-icon :component="theme.icon"></n-icon>
                </template>
            </n-button>
            <!-- 登录按钮 -->
            <n-button tertiary type="success" v-if="!id" @click="changeLoginModalShowStatus(true)">登录</n-button>
        </n-space>
    </n-space>

    <!-- 用户基本信息（抽屉） -->
    <user-basic-info-drawer ref="userBasicInfo" />
</template>


<style scoped>
div.n-menu:deep(div.n-menu-item-content) {
    padding-left: 18px !important;
}
</style>